<template>
	<view>
		<view class="title">已选时间：10月27日 {{time}}</view>
		<view class="cardBox1">
			<view class="cardWx">
				<image class="wxleftImage" src="../static/微信.png"></image>
				<view class="wxtext">微信支付</view>
				<view class="wxmoney">¥59.90</view>
				<image class="wxsureImage" @click="clcik_check('wx')" :src="checkImageId=='wx'?check:unchecked" mode="">
				</image>
				<view class="wxline"></view>
				<view class="wxbottomText">可用优惠券：</view>
				<view class="wxbottomText2">-¥5：</view>
				<image @click="click_preferential('wx')" class="wxbottomButton" src="../static/微信支付.png"></image>
			</view>
		</view>
		<view class="cardBxo2">
			<image class="leftImage" src="../static/门店卡.png" mode=""></image>
			<view class="text">门店卡支付</view>
			<image class="sureImage" @click="clcik_check('md')" :src="checkImageId=='md'?check:unchecked"></image>
			<view class="line"></view>
			<view class="bottomText">可用余额：</view>
			<view class="moneyText">¥0.00</view>
			<view class="rechargeButton" @click="click_preferential('md')">去充值</view>
			<view class="rechargePreferential">充66送30元</view>
		</view>
		<view class="cardBxo2">
			<image class="leftImage" src="../static/平台通.png" mode=""></image>
			<view class="text">平台通卡支付</view>
			<image class="sureImage" @click="clcik_check('pt')" :src="checkImageId=='pt'?check:unchecked"></image>
			<view class="line"></view>
			<view class="bottomText">可用余额：</view>
			<view class="moneyText">¥0.00</view>
			<view class="rechargeButton" @click="click_preferential('pt')">去充值</view>
			<view class="rechargePreferential">充66送30元</view>
		</view>
		<view class="bottomNavigation">
			<view class="article">
				<image class="image" :src="check" mode=""></image>
				<view class="text1">我已阅读并同意</view>
				<view class="text2">《免责条款》</view>
			</view>
			<view class="money">
				<view class="text1">¥ 54.9 元</view>
				<view class="text2">¥59.90</view>
				<view class="text3">共减5元</view>
			</view>
			<view class="pay">
				立即支付
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const check = '../static/勾选.png'
	const unchecked = '../static/未勾选.png'
	const checkImageId = ref('wx')
	const checkData = ref()
	const clcik_check = (item) => {
		checkImageId.value = item
	}
	const click_preferential = (item) => {
		if (item == checkImageId.value) {
			console.log(checkImageId.value)
		}
	}
	const time = ref()
	onLoad((item) => {
		console.log(item)
		time.value = item.time
	})
</script>

<style lang="scss" scoped>
	.title {
		margin-left: 32rpx;
		margin-top: 32rpx;
		width: 450rpx;
		height: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
	}

	.cardBox1 {
		margin-left: 32rpx;
		margin-top: 32rpx;

		.cardWx {
			position: relative;
			width: 686rpx;
			height: 210rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.wxleftImage {
				position: absolute;
				top: 24rpx;
				left: 24rpx;
				height: 80rpx;
				width: 80rpx;
			}

			.wxtext {
				position: absolute;
				top: 44rpx;
				left: 124rpx;
				width: 112rpx;
				height: 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.wxmoney {
				position: absolute;
				top: 44rpx;
				left: 482rpx;
				width: 92rpx;
				height: 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.wxsureImage {
				position: absolute;
				top: 40rpx;
				right: 24rpx;
				height: 48rpx;
				width: 48rpx;
			}

			.wxline {
				position: absolute;
				top: 128rpx;
				left: 24rpx;
				width: 638rpx;
				height: 1rpx;
				border: 2rpx dashed #D9D9D9;
			}

			.wxbottomText {
				position: absolute;
				left: 24rpx;
				top: 152rpx;
				width: 144rpx;
				height: 34rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 28rpx;
			}

			.wxbottomText2 {
				position: absolute;
				top: 152rpx;
				right: 52rpx;
				width: auto;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
			}

			.wxbottomButton {
				margin: 10rpx;
				position: absolute;
				top: 150rpx;
				right: 24rpx;
				height: 20rpx;
				width: 20rpx;
			}
		}
	}

	.cardBxo2 {
		position: relative;
		margin-left: 32rpx;
		margin-top: 32rpx;
		width: 686rpx;
		height: 242rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.leftImage {
			position: absolute;
			top: 24rpx;
			left: 24rpx;
			height: 80rpx;
			width: 80rpx;
		}

		.text {
			position: absolute;
			top: 44rpx;
			left: 124rpx;
			width: auto;
			height: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}

		.sureImage {
			position: absolute;
			top: 40rpx;
			right: 24rpx;
			height: 48rpx;
			width: 48rpx;
		}

		.line {
			position: absolute;
			top: 128rpx;
			left: 24rpx;
			width: 638rpx;
			height: 1rpx;
			border: 2rpx dashed #D9D9D9;
		}

		.bottomText {
			position: absolute;
			top: 178rpx;
			left: 22rpx;
			width: 120rpx;
			height: 34rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;
		}

		.moneyText {
			position: absolute;
			top: 178rpx;
			left: 142rpx;
			width: 66rpx;
			height: 34rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;
		}

		.rechargeButton {
			width: 140rpx;
			height: 46rpx;
			background: #10C76E;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(8, 153, 108, 0.5);
			border-radius: 48rpx 48rpx 48rpx 48rpx;

			font-weight: bold;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 46rpx;
			text-align: center;
			position: absolute;
			top: 172rpx;
			left: 520rpx;
		}

		.rechargePreferential {
			width: 126rpx;
			height: 32rpx;
			background: linear-gradient(180deg, #FFE7D1 0%, #FF9E46 100%);
			border-radius: 8rpx 20rpx 20rpx 2rpx;

			font-weight: bold;
			font-size: 18rpx;
			color: #854000;
			line-height: 32rpx;
			text-align: center;
			position: absolute;
			top: 150rpx;
			left: 552rpx;

		}
	}

	.bottomNavigation {
		position: relative;
		position: absolute;
		bottom: 0;
		width: 750rpx;
		height: 400rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.article{
			display: flex;
			margin-top: 38rpx;
			margin-left: 38rpx;
			.image{
				height: 28rpx;
				width: 28rpx;
			}
			.text1{
				margin-left: 8rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
			}
			.text2{
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #10C76EFF;
				line-height: 28rpx;
				text-align: left;
			}
		}
		.money{

			.text1{
				position: absolute;
				top: 113rpx;
				left: 40rpx;
				width: 242rpx;
				font-weight: 400;
				font-size: 55rpx;
				color: #EE5618;
				line-height: 47rpx;
				text-align: left;
			}
			.text2{
				position: absolute;
				top: 136rpx;
				left: 302rpx;
				width: 80rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				text-align: left;
				text-decoration-line: line-through;
			}
			.text3{
				position: absolute;
				top: 136rpx;
				left: 402rpx;
				width: 88rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				text-align: left;
			}
		}
		.pay{
			position: absolute;
			top: 228rpx;
			left: 60rpx;
			width: 630rpx;
			height: 96rpx;
			background: #10C76E;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(255,255,255,0.25);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			border: 2rpx solid rgba(16,199,110,0.3);
			
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-shadow: 0px 2px 0px rgba(0,0,0,0.1);
			text-align: center;
		}
	}
</style>